<template>
  <a-modal
    v-model:visible="formVisible"
    :title="getTitle"
    @ok="handleModalOK"
    @cancel="handleModalCancel"
    :confirm-loading="confirmLoading"
    wrap-class-name="full-modal"
    width="100%"
  >
    <a-form
      :model="formData"
      :label-col="{ span: 2 }"
      :wrapper-col="{ span: 20 }"
      style="margin-top: 20px"
    >
      <a-form-item v-bind="validateInfos.title" label="标题">
        <a-input v-model:value="formData.title" />
      </a-form-item>
      <a-row>
        <a-col :span="8">
          <a-form-item label="创建人" :label-col="{ span: 6 }">
            <a-input v-model:value="formData.creator" :disabled="true" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="创建时间" :label-col="{ span: 6 }">
            <a-input v-model:value="formData.createtime" :disabled="true" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="状态" v-bind="validateInfos.status" :label-col="{ span: 6 }">
            <a-radio-group v-model:value="formData.status">
              <a-radio :value="1">启用</a-radio>
              <a-radio :value="2">禁用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="内容">
        <Tinymce v-model="formData.content" @change="handleChange" width="100%" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
export default {
  name: 'NoticeModal',
};
</script>
<script setup lang="ts">
import { ref, computed, onMounted, watch, unref } from 'vue';
import { addNotice, updateNotice } from '/@/api/sys/notice';
import { deepMerge } from '/@/utils/index';
import { Form, message } from 'ant-design-vue';
import { getDateTime, formatToDateTime } from '/@/utils/dateUtil';
const useForm = Form.useForm;
import { Tinymce } from '/@/components/Tinymce/index';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
const userInfo = userStore.getUserInfo;

const props = defineProps({
  visible: Boolean,
  data: Object,
});
const emit = defineEmits(['ok', 'update:visible']);
const formVisible = ref(false);

const rules = ref({
  title: [{ required: true, trigger: 'change', message: '请输入标题' }],
  status: [{ required: true, trigger: 'change', message: '请选择状态' }],
});

const formData = ref({
  id: undefined,
  title: '',
  content: '',
  status: 1,
  createtime: getDateTime(),
  creator: userInfo.realName,
});

const confirmLoading = ref<boolean>(false);

const { resetFields, validate, validateInfos } = useForm(formData, rules);
const getTitle = computed(() => (formData.value.id == undefined ? '新增公告' : '编辑公告'));

watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
    if (val) {
      resetFields();
      deepMerge(formData.value, props.data);
      formData.value.createtime = formatToDateTime(formData.value.createtime);
    }
  },
);

const fetchData = async () => {};

onMounted(() => {
  fetchData();
});
function handleChange(value: string) {
  //formData.value.content = value;
}
const handleModalCancel = () => {
  formVisible.value = false;
};
const handleModalOK = async () => {
  try {
    confirmLoading.value = true;
    await validate();
    if (formData.value.id) {
      await updateNotice(unref(formData));
    } else {
      await addNotice(unref(formData));
    }
    message.success('保存成功');
    formVisible.value = false;
    emit('ok', true);
  } finally {
    confirmLoading.value = false;
  }
};
</script>

<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
    width: 100px;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
  }
}
</style>